<!-- 手机的注册登录 验证码 -->
<template>
	<view class="loginCreate-wrapper">
		<view class="box-wrapper">
			<!-- 验证码登录 -->
			<view class="loginCreate-create-box">
				<view class="loginCreate-create" @click="switch_PWD_SMS = !switch_PWD_SMS">{{ switch_PWD_SMS == true ? '注册' : '登录' }}</view>
			</view>
			<view class="" v-if="switch_PWD_SMS">
				<view class="loginCreate-text-box">
					<text>你好，</text>
					<text>欢迎来到世纪云商</text>
				</view>
				<view class="form-loginCreate">
					<view class="loginCreate-input-box">
						<view class="input-box"> 
							<view class="btn-Country max" @click="onCountry(login.country)">
								<text>{{ '中国(+86)>' }}</text>
							</view>
						</view>
					</view>
					<view class="loginCreate-input-box">
						<view class="input-box">
							<input
								class="uni-input"
								confirm-type="next"
								placeholder-class="placeholder"
								type="number"
								maxlength="11"
								selection-start='-1'
								placeholder="请输入手机号码"
								v-model="login.inputPhone"
								@input="clearInput('loginShowIcon', 'inputPhone')"
							/>
							<text class="uni-icon" v-if="loginShowIcon.inputPhone" @click="clearIcon('loginShowIcon', 'inputPhone')">&#xe434;</text>
						</view>
					</view>
					<!-- <view class="switch-PWD-SMS-box"><text>账号密码登录</text></view> -->
					<view class="f-row-center"><button class="btn-enrol" type="warn" :disabled="login_Sms_Disabled" @click="onlogin_Sms">获取验证码</button></view>
				</view>
			</view>
			<!-- 手机号注册 -->
			<view class="" v-else>
				<view class="loginCreate-text-box"><text>注册</text></view>
				<view class="form-loginCreate">
					<view class="loginCreate-input-box">
						<view class="input-box">
							<view class="btn-Country" @click="onCountry(create.country)">
								<text>{{ '中国(+86)>' }}</text>
							</view>
							<input
								class="uni-input loginPhone"
								confirm-type="next"
								placeholder-class="placeholderPhone"
								type="number"
								maxlength="11"
								placeholder="请输入手机号码"
								v-model="create.inputPhone"
								@input="clearInput('createShowIcon', 'inputPhone')"
							/>
							<text class="uni-icon" v-if="createShowIcon.inputPhone" @click="clearIcon('createShowIcon', 'inputPhone')">&#xe434;</text>
						</view>
					</view>
					<view class="loginCreate-input-box">
						<view class="input-box">
							<input
								class="uni-input"
								placeholder-class="placeholder"
								placeholder="请输入密码"
								v-model="create.inputPwd1"
								:password="createShowPwd.inputPwd1"
								@input="clearInput('createShowPwd', 'inputPwd1')"
							/>
							<!-- <text class="uni-icon" v-if="createShowIcon.inputPwd1" @click="clearIcon('inputPwd1')">&#xe434;</text> -->
							<text class="uni-icon" :class="[!createShowPwd.inputPwd1 ? 'uni-eye-active' : '']" @click="changePassword('inputPwd1')">&#xe568;</text>
						</view>
					</view>
					<view class="loginCreate-input-box">
						<view class="input-box">
							<input
								class="uni-input"
								placeholder="再次输入密码"
								placeholder-class="placeholder"
								@blur="onInputPwd2"
								v-model="create.inputPwd2"
								:password="createShowPwd.inputPwd2"
							/>
							<text class="uni-icon" :class="[!createShowPwd.inputPwd2 ? 'uni-eye-active' : '']" @click="changePassword('inputPwd2')">&#xe568;</text>
						</view>
					</view>
					<view class="loginCreate-input-box">
						<view class="input-box">
							<input
								class="uni-input"
								confirm-type="next"
								placeholder-class="placeholder"
								placeholder="邀请码"
								v-model="create.Invitation"
								@input="clearInput('createShowIcon', 'Invitation')"
							/>
							<text class="uni-icon" v-if="createShowIcon.Invitation" @click="clearIcon('createShowIcon', 'Invitation')">&#xe434;</text>
							<!-- <text class="uni-icon" :class="[!createShowPwd.Invitation ? 'uni-eye-active' : '']" @click="changePassword('Invitation')">&#xe568;</text> -->
						</view>
					</view>
					<view class="loginCreate-input-box">
						<view class="input-box">
							<input
								class="uni-input"
								confirm-type="go"
								placeholder-class="placeholder"
								placeholder="验证码"
								v-model="create.smsKey"
								@input="clearInput('createShowIcon', 'smsKey')"
							/>
							<text class="uni-icon my-l" v-if="createShowIcon.smsKey" @click="clearIcon('createShowIcon', 'smsKey')">&#xe434;</text>
							<view class="smsBtn">
								<button class="smsBtn" @click="onSendSms" :disabled="smsBtnDisabled" type="default">
									{{ wait == 6 ? '获取验证码' : '重新发送(' + wait + ')' }}
								</button>
							</view>
						</view>
					</view>
					<view class="f-row-center"><button class="btn-enrol" type="warn" :disabled="ceradDisabled" @click="onCreateUser">注册</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import barTitle from '@/components/zaiui-common/basics/bar-title';
import _tool from '@/static/zaiui/util/tools.js'; //工具函数

export default {
	components: {
		barTitle
	},
	computed: {
		ceradDisabled: function() {
			var ceradDisabled = false;
			var create = this.create;
			for (var itme in create) {
				if (!create[itme]) {
					ceradDisabled = true;
				}
			}
			return ceradDisabled;
		},
		login_Sms_Disabled:function(){
			
			if (this.login.inputPhone.length != 11) {
				return true;
			}else{
				return false;
			}
		
		}
	},
	data() {
		return {
			switch_PWD_SMS: true,
			wait: 6,
			smsBtnDisabled: false,
			login: { inputPhone: '' },
			loginShowIcon: {
				inputPhone: false
			},
			create: {
				country: {
					key: 1,
					value: '中国'
				},
				inputPhone: '',
				inputPwd1: '',
				inputPwd2: '',
				pwdOK: false,
				Invitation: '',
				smsKey: ''
			},
			createShowIcon: {
				inputPhone: false,
				inputPwd1: false,
				inputPwd2: false,
				pwdOK: false,
				Invitation: false,
				smsKey: false
			},
			createShowPwd: {
				inputPwd1: true,
				inputPwd2: true
			}
		};
	},
	onLoad() {
	},
	watch: {
		'create.inputPwd2': {
			handler(newName, oldName) {
				if (this.create.inputPwd1 == newName) {
					this.create.pwdOK = true;
				} else {
					this.create.pwdOK = false;
				}
			},
			deep: true,
			immediate: true
		},
		'create.inputPwd1': {
			handler(newName, oldName) {
				if (this.create.inputPwd2 == newName) {
					this.create.pwdOK = true;
				} else {
					this.create.pwdOK = false;
				}
			},
			deep: true,
			immediate: true
		}
	},
	onReady() {
		_tool.setBarColor(true);
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	},
	methods: {
		onCountry(country) {
			console.log(country);
			uni.navigateTo({
				url: '/pages/country/country'
			});
		},
		clearInput: function(obj, key) {
			if (obj == 'loginShowIcon') {
				if (this.login[key]) {
					this.loginShowIcon[key] = true;
				} else {
					this.loginShowIcon[key] = false;
				}
			} else if (obj == 'createShowIcon') {
				if (this.create[key]) {
					this.createShowIcon[key] = true;
				} else {
					this.createShowIcon[key] = false;
				}
			}
		},
		clearIcon: function(obj, key) {
			if (obj == 'loginShowIcon') {
				this.login[key] = '';
				this.loginShowIcon[key] = false;
			} else if (obj == 'createShowIcon') {
				this.create[key] = '';
				this.createShowIcon[key] = false;
			}
		},
		changePassword: function(key) {
			this.createShowPwd[key] = !this.createShowPwd[key];
		},
		onlogin_Sms() {
			//不是禁用的状态的，可以发送验证码
			var inputPhone=this.login.inputPhone;
			//8.129.162.11
			uni.request({
				//http://8.129.162.11:9200/agency-center/v1/agency/loginSendSms
				//http://8.129.162.11:9200/agency-center/v1/agency/registerSendSms
						url: 'http://8.129.162.11:9200/agency-center/v1/agency/loginSendSms',
						data: {mobile:inputPhone},
						method: 'post',
						success: response => {
							console.log('跳转验证码输入',response);
							if(response.statusCode==200){
								if(response.data.code==6000){
									uni.showToast({ title: response.data.message, icon: 'none' });
									return false;
								}else if(response.data.code==0){
									uni.showToast({ title: response.data.message, icon: 'none' });
									uni.navigateTo({
										url:'/pages/my/userLogin/sms_Translation?phone='+inputPhone
									})
								}else {
									uni.showToast({ title:response.data.message, icon: 'none' });
									return false;
								}
								
							}
							 
						},
						fail: response => {
							console.log(JSON.stringify(response));
						}
			});
		
		},
		onSendSms() {
			//发送验证码
			var that = this;
			if (that.create.inputPhone.length != 11) {
				uni.showToast({ title: '请填写正确的手机号!', icon: 'none' });
				return false;
			}
			var createPhone= that.create.inputPhone;
			uni.request({
						url: 'http://8.129.162.11:9200/agency-center/v1/agency/registerSendSms',
						data: {mobile:createPhone},
						method: 'post',
						success: response => {
							console.log(response);
						},
						fail: response => {
							console.log(JSON.stringify(response));
						}
			});
			var onSendSms=function(that){
				if (that.wait == 0) {
					that.smsBtnDisabled = false;
					that.wait = 6;
				} else {
					that.smsBtnDisabled = true;
					that.wait--;
					setTimeout(function() {
						onSendSms(that);
					}, 1000);
				}
			}
			onSendSms(that)
		},
		onInputPwd2() {
			if (this.create.inputPwd1 != this.create.inputPwd2) {
				uni.showToast({ title: '两次密码输入不一致!', icon: 'none' });
			}
		},
		onCreateUser() {
			var that=this;
			if (!this.ceradDisabled) {
				console.log('请求注册接口');
				var data={
					phone:that.create.inputPhone,
					password:that.create.inputPwd1,
					secondPassword:that.create.inputPwd2,
					userInviteCode:that.create.Invitation,
				}
				uni.request({
					url: 'http://8.129.162.11:9200/agency-center/v1/agency/registUser',
					data: data,
					method: 'post',
					header: {
						deviceId: that.create.inputPhone,
						validCode: that.create.smsKey
					},
					success: response => {
						console.log('注册登陆',response);
						if(response['resp_code']){
							if(response.resp_code==500){
								uni.showToast({ title: '请满足数字字母符号，长度8位.', icon: 'none' });
								return false;
							}
						}
						if (response['statusCode'] ) {
							if (response['statusCode'] == 200) {
								uni.navigateTo({
									url: '../app/index'
								});
							}else if(response.data.resp_code==500){
								uni.showToast({ title:response.data.resp_msg, icon: 'none' });
							}
							
						}
						
					},
					fail: response => {
						console.log(JSON.stringify(response));
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
/* #ifdef APP-PLUS */
@import '../../static/colorui/main.css';
@import '../../static/colorui/icon.css';
@import '../../static/zaiui/style/app.scss';
/* #endif */
page {
	background: #ffffff;
}
.uni-input {
	padding: 0upx;
}
.loginCreate-wrapper {
	margin-top: 45upx;
}
.uni-input.loginPhone{
	margin-left: 15upx;
	
}
.box-wrapper {
	padding: 0px 38upx;
}
.loginCreate-create {
	height: 32upx;
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(230, 69, 69, 1);
}
.loginCreate-create-box {
	margin-top: 150upx;
	display: flex;
	flex-direction: row; /*排列方向 列*/
	justify-content: flex-end; /*水平居中*/
	align-items: center; /* 垂直居中*/
}
.loginCreate-text-box {
	margin-top: 116upx;
	display: flex;
	flex-direction: column; /*排列方向 列*/
	justify-content: flex-start; /*水平居中*/
}
.loginCreate-text-box text {
	line-height: 46upx;
	font-size: 48upx;
	height: 78upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(77, 76, 84, 1);
}
.form-loginCreate {
	margin-top: 64upx;
	width: 100%;
}
.loginCreate-input-box {
	height: 122upx;
	border-bottom: 2upx solid rgba(237, 240, 242, 1);
	flex-direction: row; /*排列方向 列*/
	justify-content: flex-end; /*水平居中*/
	align-items: center; /* 垂直居中*/
	white-space: nowrap; /* 不换行*/
}
.input-box {
	padding-top: 30upx;
	display: flex;
	flex-direction: row; /*排列方向 */
	justify-content: flex-start; /*富裕空间的位置*/
	align-items: center;
}
.input-box input {
	height: 90upx;
	font-size: 36upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(77, 76, 84, 1);
	text-align: left;
}

.uni-icon {
	font-family: uniicons;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	width: 24px;
	height: 24px;
	line-height: 24px;
	color: #999999;
}
.my-l:after {
	margin-left: 16upx; /*after在中间1*/
	height: 30upx;
	content: '';
	border-left: #b2b2b2 2upx solid;
}
.btn-Country {
	width: 140upx;
	height: 90upx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(77, 76, 84, 1);

	padding: 15rpx 25upx;

	display: flex;
	justify-content: center; /*水平居中*/
	align-items: center;
}
.max {
	font-size: 36upx;
	font-weight: 500;
	margin-left: 20upx;
}
.smsBtn button {
	margin-left: 34upx; /*after在中间2*/
	width: 220upx;
	height: 72upx;
	background: rgba(238, 238, 238, 1);
	opacity: 0.7;
	border-radius: 36upx;
	display: flex;
	justify-content: center; /*水平居中*/
	align-items: center;

	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
}

button::after {
	border: none;
}
.f-row-center {
	margin-top: 80upx;
	display: flex;
	justify-content: center; /*水平居中*/
	align-items: center;
}
.btn-enrol {
	width: 600upx;
	height: 80upx;
	background: rgba(230, 69, 69, 1);
	border-radius: 40upx;

	display: flex;
	justify-content: center; /*水平居中*/
	align-items: center;
}
.btn-enrol text {
	font-size: 36upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}
.uni-eye-active {
	color: #007aff;
}
.placeholder {
	// margin-left: -25upx;
	padding-left: 0px;
	font-size: 28upx;
	font-weight: 400;
	color: rgba(117, 121, 128, 1);
}
.placeholderPhone {
	font-size: 28upx;
	font-weight: 400;
	color: rgba(117, 121, 128, 1);
}

.switch-PWD-SMS-box {
	margin-top: 40upx;
}
.switch-PWD-SMS-box text {
	height: 28upx;
	font-size: 28upx;
	font-weight: 400;
	color: rgba(230, 69, 69, 1);
}
</style>
